<script setup>
import middle from './middle.vue'
import right from './right.vue'
import empty from './empty.vue'
import addFriendInterface  from '../toggleInterface/addFriendInterface.vue'
import { middlePage, rightPage } from '@/stores/page';
import { onMounted, onUnmounted } from 'vue';
import addUserInfo  from '../toggleInterface/addUserInfo.vue'
import addGroupInfo from '../toggleInterface/addGroupInfo.vue'

onMounted(() => {
  middlePage.value = 1;
  rightPage.value = 0;
})

</script>

<template>

<el-container>
  
  <el-aside style="width : 21.4vw; position:fixed; right:74.3%">
    <div v-if="middlePage ===0">
      <empty></empty>
    </div>
    <div v-else-if="middlePage === 1">
      <middle></middle>
    </div>
    <div v-else-if="middlePage === 2">
      <addFriendInterface></addFriendInterface>
    </div>
  </el-aside>

  <el-main style="position : fixed; left:25.7%">
    <div v-if="rightPage ===0">
      <empty></empty>
    </div>
    <div v-else-if="rightPage === 1">
      <right></right>
    </div>
    <div v-else-if="rightPage === 2">
    </div>
    <div v-else-if="rightPage === 3">
      <addUserInfo></addUserInfo>
    </div>
    <div v-else-if="rightPage === 4">
      <addGroupInfo></addGroupInfo>
    </div>
  </el-main>

</el-container>
</template>

<style scoped>
    @import '../../css/chatInterface.css';
</style>